document.addEventListener("DOMContentLoaded", function () {
    var cat = document.querySelector('#cat')
    var cymbal = document.querySelector('#cymbal')
    var drink = document.querySelector('#drink')
    var eat = document.querySelector('#eat')

    let timer // 保证定时器的执行与清除都是同一个timer
    // 点击锣鼓，切换猫图
    cymbal.onclick = function () {
        action('cymbal', 12)
    }

    drink.onclick = function () {
        action('drink', 80)
    }
    eat.onclick = function () {
        action('eat',39)
    }

    function action(name, sum) {
        // 每次开启定时器前，先清除上次的定时器。保证只会执行最后一个定时器。
        clearInterval(timer)
        let n = 0
        // 定时器
        timer = setInterval(() => {
            cat.src = getImg(name)
            n++ 
            // 当索引超出图片范围，清除定时器
            if(n > sum) {
                clearInterval(timer)
            }
        }, 100);
    }

    function getImg (name) {
        return "Animations/"+name+"/"+name+"_"+ getIndex (n) +".jpg"
    }



    function getIndex (n) {
        if(n < 10) {
           return '0' + n
        } else {
            return n
        }
    }


})
